<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MEGA 2.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  function initTreePanelScroll()
  {
	  $('.fm-tree-panel').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initTransferPanelScroll()
  {
	  $('.transfer-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initGridScroll()
  {
	  $('.grid-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initBlocksScroll()
  {
	  $('.file-block-scrolling').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  
  
  $.gridHeader = function()  
  {	
		$('.grid-table tbody tr:first-child td').each(function(i,e) {
		  var headerColumn = $('.grid-table-header th').get(i);
		  $(headerColumn).width($(e).width());
	    });
   }	
	
  initTreePanelScroll();
  initTransferPanelScroll();
  initGridScroll();
  initBlocksScroll();
  $.gridHeader();
  
  $(window).bind('resize', function () 
  {
	  initTreePanelScroll();
      initTransferPanelScroll();
      initGridScroll();
      initBlocksScroll();
      $.gridHeader();
  });
  $('.nw-fm-tree-folder').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('selected') == -1) {
		  $('.nw-fm-tree-item.selected').removeClass('selected');
		  fmTreeItem.addClass('selected');
	  }
  });
  $('.contains-folders > .nw-fm-arrow-icon').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('expanded') == -1) {
		  fmTreeItem.addClass('expanded');
		  fmTreeItem.next('ul').addClass('opened');
		  initTreePanelScroll();
	  } else {
		  fmTreeItem.removeClass('expanded');
		  fmTreeItem.next('ul').removeClass('opened');
		  initTreePanelScroll();
	  }
  });
  $('.nw-fm-left-icon').bind('click', function() {
	  var currentPanelTitle = $(this).attr('class').split(' ')[1];
	  if($(this).attr('class').indexOf('active') == -1) {
		  $('.nw-fm-left-icon.active').removeClass('active');
		  $(this).addClass('active');
		  $('.content-panel.active').removeClass('active');
		  $('.content-panel.'+currentPanelTitle).addClass('active');
		  initTreePanelScroll();
		  $('.fm-left-menu').removeClass().addClass('fm-left-menu ' + currentPanelTitle);
	  }
  });
  $('.nw-contact-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-contact-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  $('.nw-conversations-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-conversations-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  var initial;
  $('.nw-fm-left-icon').bind('mouseover', function () {
	  var  tooltip = $(this).find('.nw-fm-left-tooltip');
	  clearTimeout( initial );
	  initial = window.setTimeout( 
      function() {
        $(tooltip).addClass('hovered');
      }, 1000);
  });
  $('.nw-fm-left-icon').bind('mouseout', function () {
	    $(this).find('.nw-fm-left-tooltip').removeClass('hovered');
		clearTimeout( initial );
  });
  
  $('.fm-files-view-icon').bind('click', function () {
	  if ($(this).attr('class').indexOf('active') == -1) {
		  if ($(this).attr('class').indexOf('block-view') > -1) {
			  $('.files-grid-view').addClass('hidden');
			  $('.fm-blocks-view').removeClass('hidden');
              initBlocksScroll(); 
		  } else {
			  $('.files-grid-view').removeClass('hidden');
			  $('.fm-blocks-view').addClass('hidden');
			  initGridScroll();
		  }
		  $('.fm-files-view-icon').removeClass('active');
		  $(this).addClass('active');
	  }
  });
	
	
  
});

</script>
</head>

<body id="bodyel">

<!-- transfer-panel-opened class !-->
<div id="fmholder" class="fmholder" style="display: block;">
          <div class="top-head">
           
          </div>
          <div class="fm-main default">
              <div class="nw-fm-left-icons-panel">
                 <div class="nw-fm-left-icon cloud-drive">
                   <div class="nw-fm-left-tooltip">Cloud Drive</div>
                 </div>
                 <div class="nw-fm-left-icon shared-with-me">
                   <div class="nw-fm-left-tooltip">Shared with me</div>
                 </div>
                 <div class="nw-fm-left-icon contacts active">
                   <div class="nw-fm-left-tooltip">Contacts</div>
                 </div>
                 <div class="nw-fm-left-icon conversations">
                   <div class="nw-fm-left-tooltip">Conversations</div>
                 </div>
                 <div class="nw-fm-left-icon rubbish-bin filled"><div class="nw-fm-left-tooltip">Rubbish bin</div><div class="rubbish-bin-icon"></div></div>
              </div>
          
              <div class="fm-left-panel">
                <div class="fm-left-menu contacts">
                   <div class="nw-fm-tree-header cloud-drive"> 
                      Cloud Drive 
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header shared-with-me"> 
                      Shared with me
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header contacts"> 
                      Contacts
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header conversations"> 
                      Conversations
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header rubbish-bin"> 
                      Rubbish bin
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                </div>
                <div class="fm-tree-panel">
                  <div class="nw-tree-panel-header">
                     <span>My contacts</span>
                     <div class="nw-tree-panel-arrows"></div>
                  </div>
                  <div class="content-panel contacts active">
                    <div class="nw-contact-item offline">
                      <div class="nw-contact-status"></div>
                      <div class="nw-contact-name">Andrei.Dymovich@conmio.com</div>
                    </div>
                    <div class="nw-contact-item busy">
                      <div class="nw-contact-status"></div>
                      <div class="nw-contact-name">Bram van der Kolk</div>
                    </div>
                    <div class="nw-contact-item away">
                      <div class="nw-contact-status"></div>
                      <div class="nw-contact-name">Eduardo</div>
                    </div>
                    <div class="nw-contact-item online">
                      <div class="nw-contact-status"></div>
                      <div class="nw-contact-name">Zeus</div>
                    </div>
                  </div>
                </div>
              
              </div>
              <div class="fm-right-files-block">
              
                <div class="fm-right-header">
                
                   <div class="fm-breadcrumbs-block">
                     <!-- Please replace "cloud-drive" on "contacts" !-->
                     <a class="fm-breadcrumbs contacts contains-directories has-next-button">
                       <span class="right-arrow-bg"><span></span></span>
                     </a>
                     <!-- Please replace "folder" on "contact" !-->
                     <a class="fm-breadcrumbs contact contains-directories">
                         <span class="right-arrow-bg ui-draggable"><span>asdasd</span></span>
                     </a>
                     <div class="clear"></div>
                   </div>
                
                   <a class="fm-files-view-icon block-view"></a>
                   <a class="fm-files-view-icon listing-view active"></a>
                   <div class="clear"></div>
                </div>
                
                
                
                <!-- New contact details block !-->
                <div class="contacts-details-block">
                  <div class="contact-top-details">
                  
                     <div class="nw-contact-block-avatar color10">
                         A
                     </div>
                     <div class="contact-fingerprint-block">
                           <div class="contact-fingerprint-title">Unique Crypto Fingerprint:</div>
                           <div class="contact-fingerprint-txt">
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                           </div>
                           <div class="contact-fingerprint-txt">
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                             <span>QH7XF</span>
                           </div>
                           <div class="fm-verify">
                             <span">Verify...</span>
                           </div>
                           <div class="fm-question">
                           </div>
                           <div class="clear"></div>
                      </div>
                     
                     <div class="contact-details-pad">
                        <div class="contact-details-user-name">Andrei.d</div>
                        <a href="" class="grid-url-arrow"><span></span></a>
                        <div class="clear"></div>
                        <div class="contact-details-email">ad@mega.co.nz</div>
                        <div class="away">
                            <div class="nw-contact-status"></div>
                            <div class="fm-chat-user-status">Away</div>
                            <div class="clear"></div>
                        </div>
                        <div class="fm-start-conversation">
                           <span>Start Conversation</span>
                        </div>
                        <div class="fm-send-files">
                           <span class="fm-chatbutton-arrow">Send files...</span>
                        </div>
                        <div class="fm-share-folders">
                           <span>Share Folders</span>
                        </div>
                        
                        <div class="clear"></div>
                     </div>
                     <div class="clear"></div>
                     
                     <!-- Please add "hidden" class if there is no shared folders !-->
                     <div class="contact-share-notification hidden">Andrei.d shared the following folders with you:</div>
                     
                  </div>
                  
                  <div class="fm-empty-incoming contact-details-view">
                     <div class="fm-empty-pad">
                       <div class="fm-empty-incoming-bg"></div>
                       <div class="fm-empty-cloud-txt">You have no incoming shares</div>
                     </div>
                  </div>
                  
                  <div class="files-grid-view contact-details-view hidden">
                
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="grid-table-header">
                      <tr>
                        <th class="grid-first-th"><span class="grid-header-star"></span></th>
                        <th><div class="arrow name desc">Name</div></th>
                        <th><div class="arrow type">Access</div></th>
                      </tr>
                    </table>
                    
                    <div class="grid-scrolling-table">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="grid-table shared-with-me">
                        <tr>
                          <td width="30"><span class="grid-status-icon star"></span></td>
                          <td>
                              <div class="shared-folder-icon"></div>
                              <div class="shared-folder-info-block">
                                 <div class="shared-folder-name">Shared folder name 1</div>
                                 <div class="shared-folder-info">4 files, 2 folders</div>
                              </div> 
                          </td>
                          <td width="270">
                            <!-- Please add any of classname: read-only/read-and-write/full-access !-->
                            <div class="shared-folder-access full-access">Full access</div>
                          </td>
                        </tr>
                        <tr>
                          <td width="30"><span class="grid-status-icon star"></span></td>
                          <td>
                              <div class="shared-folder-icon"></div>
                              <div class="shared-folder-info-block">
                                 <div class="shared-folder-name">Shared folder name 1</div>
                                 <div class="shared-folder-info">4 files, 2 folders</div>
                              </div> 
                          </td>
                          <td width="270">
                            <!-- Please add any of classname: read-only/read-and-write/full-access !-->
                            <div class="shared-folder-access read-and-write">Read and write</div>
                          </td>
                        </tr>
                        <tr>
                          <td width="30"><span class="grid-status-icon"></span></td>
                          <td>
                              <div class="shared-folder-icon"></div>
                              <div class="shared-folder-info-block">
                                 <div class="shared-folder-name">Shared folder name 1</div>
                                 <div class="shared-folder-info">4 files, 2 folders</div>
                              </div> 
                          </td>
                          <td width="270">
                            <!-- Please add any of classname: read-only/read-and-write/full-access !-->
                            <div class="shared-folder-access read-only">Read only</div>
                          </td>
                        </tr>
                        <tr>
                          <td width="30"><span class="grid-status-icon"></span></td>
                          <td>
                              <div class="shared-folder-icon"></div>
                              <div class="shared-folder-info-block">
                                 <div class="shared-folder-name">Shared folder name 1</div>
                                 <div class="shared-folder-info">4 files, 2 folders</div>
                              </div> 
                          </td>
                          <td width="270">
                            <!-- Please add any of classname: read-only/read-and-write/full-access !-->
                            <div class="shared-folder-access full-access">Full access</div>
                          </td>
                        </tr>
                      </table>
                    </div>
                
                </div>
                  
                  <div class="fm-blocks-view contact-details-view hidden">
                    <div class="file-block-scrolling">
                       <a class="file-block folder">
                         <span class="file-status-icon"></span>
                         <span class="file-settings-icon"><span></span></span>
                         <span class="shared-folder-access  read-only"></span>
                         <span class="file-icon-area">
                           <span class="block-view-file-type folder-shared"><img alt=""></span>
                         </span>
                         <span class="file-block-title">asdasd</span>
                       </a>
                       <a class="file-block folder">
                         <span class="file-status-icon"></span>
                         <span class="file-settings-icon"><span></span></span>
                         <span class="shared-folder-access  read-and-write"></span>
                         <span class="file-icon-area">
                           <span class="block-view-file-type folder-shared"><img alt=""></span>
                         </span>
                         <span class="file-block-title">asdasd</span>
                       </a>
                       <a class="file-block folder">
                         <span class="file-status-icon"></span>
                         <span class="file-settings-icon"><span></span></span>
                         <span class="shared-folder-access  full-access"></span>
                         <span class="file-icon-area">
                           <span class="block-view-file-type folder-shared"><img alt=""></span>
                         </span>
                         <span class="file-block-title">asdasd</span>
                       </a>
                       <a class="file-block folder">
                         <span class="file-status-icon"></span>
                         <span class="file-settings-icon"><span></span></span>
                         <span class="shared-folder-access  read-only"></span>
                         <span class="file-icon-area">
                           <span class="block-view-file-type folder-shared"><img alt=""></span>
                         </span>
                         <span class="file-block-title">asdasd</span>
                       </a>
                       <div class="clear"></div>
                    </div>
                  </div>
                  
                </div>
                
              
              </div>
              <div class="clear"></div>
           
          </div>
          
<div class="transfer-panel">
  <div class="transfer-icons-block">
   <div class="transfer-drag-handle ui-resizable-handle ui-resizable-n"></div>
   <div class="file-transfer-icon download-percents-50  upload-percents-49">
     <div class="file-transfer-download">
        <div class="file-transfer-upload"></div> 
     </div> 
   </div>
   <div class="transfer-panel-title">
         File transfers
   </div>
   <a class="tranfer-view-icon active"></a>
   <a class="transfer-settings-icon"></a>
   <div class="tranfer-upload-indicator active">
        640 Kb/s
   </div>
   <div class="tranfer-download-indicator active">
        1640 Kb/s
   </div>
   <a class="transfer-pause-icon active"></a>
   <div class="clear"></div>
 </div>
</div>


</div>


</body>
</html>
